{% stylesheet %}

.collection_list_default .collection_content ul {
  display: grid;
  row-gap: 30px;
  column-gap: 30px;
  grid-template-columns: repeat(3, 1fr);
}

.collection_list_default .collection_content li {
  list-style-type: none;
  overflow: hidden;
}

.collection_list_default .collection_content li .collection_pic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.collection_list_default .collection_content li .collection_img {
  width: 100%;
  height: 100%;
}

.collection_list_default .collection_content li .collection_pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}

.collection_list_default .collection_content li:hover .collection_pic img {
  transform: scale(1.1);
}

.collection_list_default .collection_content li .collection_pic .collection_name {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 24px;
  font-family: var(--title_font_family);
  font-style: var(--title_font_style);
  font-weight: var(--title_font_weigth);
}

.collection_list_default .collection_content li .collection_pic .collection_name span {
  display: block;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media(max-width: 767px) {
  .collection_list_default .collection_content ul {
    row-gap: 15px;
    column-gap: 15px;
    grid-template-columns: repeat(2, 1fr);
  }
  
.collection_list_default .collection_content li .collection_pic .collection_name {
    font-size: 18px;
  }
}

{% endstylesheet %}


{% assign collections = collections | default: section.params.collections %}

<div class="collection_list_default container_wrapper" id="collection_list">
  <h1 class="title">{{ section.settings.title | default: lang.collections.list.collections }}</h1>
  <div class="plugin-container-header"></div>

  <div class="collection_content">

    {% assign collection_ids = section.blocks | get_array_values: "collection" | get_array_values: "id" | join: "," %}
    {% if collection_ids != "" %}
      {% get_collections ids = {collection_ids} limit = {section.settings.pagesize} collection_image=1 %}
      <ul>
        {% for collection in collections %}
          <li>
            {%- if collection.image_alt == "" -%}
              {% assign collection_alt = collection | image_alt:'collection'   %}
            {%- else -%}
              {% assign collection_alt = collection.image_alt %}
            {%- endif -%}
            <a class="collection_pic" href="/collections/{{ collection.handle }}">
              <div class="collection_img">
                <img data-src="{{ collection.src|public_front_asset_url }}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" alt="{{ collection_alt }}">
              </div>
              {% if section.settings.show_title %}
              <div class="collection_name">{{ collection.title }}</div>
              {% endif %}
            </a>
          </li>
        {% endfor %}
      </ul>
      {% include pagination ,{ paginate : collectionsPaginate } %}
    {% else %}
      {% if collections.size > 0 %}
        <ul>
          {% for collection in collections %}
            {%- if collection.image_alt == "" -%}
              {% assign collection_alt = collection | image_alt:'collection'   %}
            {%- else -%}
              {% assign collection_alt = collection.image_alt %}
            {%- endif -%}
            <li>
              <a class="collection_pic" href="/collections/{{ collection.handle }}">
                <div class="collection_img">
                  <img data-src="{{ collection.src|public_front_asset_url }}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" alt="{{ collection_alt }}">
                </div>
                {% if section.settings.show_title %}
                <div class="collection_name">{{ collection.title }}</div>
                {% endif %}
              </a>
            </li>
          {% endfor %}
        </ul>
        {% include pagination ,{ paginate : paginate } %}
      {% else %}
        {% include 'empty' , text:lang.general.no_collections %}
      {% endif %}
    {% endif %}
    <div class="plugin-container-footer"></div>


  </div>
</div>
<script type="text/javascript">
  var _w = $("#collection_list").find("li").width();
  $(".collection_pic").css("height", _w);
</script>


{% schema %}
{
	"tag": "section",
	"class": "collection_list",
	"is_global": false,
	"name": {
		"zh_CN": "专辑列表",
		"en_US": "Collection list"
	},
	"max_blocks": 80,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "id": "title",
      "default": ""	
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "显示专辑标题",
        "en_US": "Show collection title"
      },
      "default": true,
      "id": "show_title"
    },
		{
			"type": "card_input_number",
			"max": 80,
			"min": 8,
			"id": "pagesize",
			"label": {
				"zh_CN": "专辑每页数量",
				"en_US": "Collection number per page"
			},
			"info": {
				"zh_CN": "默认数量12个;最小8个、最大80个;重复专辑会被忽略",
				"en_US": "The default number 12; minimum 8, 80; largest repeated collection details will be ignored"
			},
			"refresh": true,
			"default": 12
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "选择专辑",
				"en_US": "Select collection"
			},
			"type": "collection-item",
			"settings": [
				{
					"type": "card_collection",
					"label": {
						"zh_CN": "专辑",
						"en_US": "Collection"
					},
					"default": {
						"id": "",
						"title": ""
					},
					"refresh": true,
					"id": "collection"
				}
			]
		}
	],
	"default": {
		"settings": {
      "title": "",
      "show_title": true,
			"pagesize": 12,
			"refresh": true
		},
		"blocks": [
			{
				"collection": {
					"id": "",
					"title": ""
				},
				"block_type": "collection-item"
			}
		]
	}
}
{% endschema %}